<template>
  <div class="am-u-md-12">
    <div class="am-panel am-panel-default">
        <div class="am-panel-bd">
          <div class="am-g">
            <div class="am-u-sm-12 am-u-md-3">
              大赛介绍：
              <p>开始时间-结束时间</p>
              大赛阶段等
              <p>。。。</p>
            </div>

            <div class="am-u-sm-12 am-u-md-9">
              <div class="am-g">
                <!-- 条件面板 -->
                <div class="am-u-sm-12">
                  <div class="filter">
                    <ul>
                      <li v-for='(item, index) in filterData' :key="index">
                        <b>{{ item.name }}：</b>
                        <ul class='sub-filter'>
                          <li :class="{ 'select-filter': item.chosen.length === item.subName.length }" @click='chooseAll(item)'>全部</li>
                          <li v-for='(subItem, index) in item.subName' :key="index"
                              :class="{ 'select-filter': item.chosen.includes(index) }"
                              @click='choose(item.chosen, index)'>{{ subItem }}</li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>

                <!-- 搜索框 -->
                <div class="am-u-sm-12 am-u-md-4">
                  <div class="am-input-group am-input-group-sm am-margin-vertical-xs">
                    <span class="am-input-group-btn">
                      <button class="am-btn am-btn-default" type="button"><span class="am-icon-search"></span> </button>
                    </span>
                    <input type="search" class="am-form-field" placeholder="作品名称关键字搜索">
                  </div>
                </div>

                <!-- 快速排序 -->
                <div class="am-u-sm-12 am-u-md-8 am-sm-only-text-center">
                  <div class="am-btn-group am-margin-vertical-xs">
                  <button type="button" class="am-btn am-btn-primary am-radius am-btn-sm">快速排序1</button>
                  <button type="button" class="am-btn am-btn-primary am-radius am-btn-sm">快速排序2</button>
                  <button type="button" class="am-btn am-btn-primary am-radius am-btn-sm">快速排序3</button>
                  <button type="button" class="am-btn am-btn-primary am-radius am-btn-sm">快速排序4</button>
                  </div>
                </div>

                <div class="am-u-end"></div>
              </div>
            </div>
          </div>  
        </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      filterData: [
        {
          name: '空间',
          subName: [
            '客餐厅', '卧室', '儿童房', '主卧', '花园', '阳台'
          ],
          chosen: []
        },
        {
          name: '风格',
          subName: [
            '现代', '欧式', '中式', '古典'
          ],
          chosen: []
        },
        {
          name: '面积',
          subName: [
            '10-20m', '100m', '200m'
          ],
          chosen: []
        },
        {
          name: '房型',
          subName:[
            '其它', 'L形状', '凸形状'
          ],
          chosen: []
        }
      ]
    }
  },
  methods: {
    choose(chosen, index) {
      if(chosen.includes(index)) {
        chosen.splice(chosen.findIndex(idx => idx === index), 1);
      } else {
        chosen.push(index);
      }
    },
    chooseAll(item) {
      if(item.chosen.length === item.subName.length) {
        item.chosen = []
      } else {
        for(let i = 0, n = item.subName.length; i < n; i++) {
          item.chosen.push(i);
        }
      }
      item.chosen = [...new Set(item.chosen)];
      console.log(item.chosen)
    }
  }
}
</script>
